<template>
  <div class="email-verification">
    <h2>Change Fund Password</h2>
    <el-form label-position="left" label-width="220px" :model="fundForm">
      <el-form-item label="Current Fund Password">
        <el-input v-model="fundForm.current_fund_password" type="password" @input="testAndVerify" placeholder="Enter Current Fund Password"></el-input>
      </el-form-item>
      <el-form-item label="New Fund Passwprd">
        <el-input v-model="fundForm.fund_password" type="password" @input="testAndVerify" placeholder="Enter New Fund Password"></el-input>
      </el-form-item>
      <el-form-item label="Confirm New Fund Password">
        <el-input v-model="fundForm.confirm_fund_password" type="password" @input="testAndVerify" placeholder="Confirm New Fund Password"></el-input>
      </el-form-item>
      <el-form-item label="SMS Code">
        <el-input v-model="fundForm.sms" class="email-code" @input="testAndVerify" placeholder="Enter SMS Code"></el-input>
        <el-button type="warning" class="get-code" ref="newCode" @click="getEnailCode('newCode')" plain>Get Code</el-button>
      </el-form-item>
      <el-form-item>
        <el-button :type="primary" :disabled="confirmdb" class="email-confirm" @click="changeFund">CONFIRM</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { resend } from "@/filter/index";
import { verCode } from "@/api/userLogin";
import { changeFundPassword } from "@/api/kycAttest";
export default {
  data() {
    return {
      fundForm: {
        current_fund_password: "",
        fund_password: "",
        confirm_fund_password: "",
        sms: ""
      },
      confirmdb: true,
      primary: 'info'
    };
  },
  computed: {
    ...mapGetters({
      someinfo: "someinfo"
    })
  },
  methods: {
    /**
     * [getEnailCode description]
     * 验证码
     * --------------------------
     * @Author   LLP
     * @DateTime 2019-12-25T16:18:47+0800
     * @param    {[type]}                 code [description]
     * @return   {[type]}                      [description]
     */
    async getEnailCode(code) {
      resend(this.$refs[code])
      let param = {
        type: '07',
        phone: this.someinfo.phone
      }
      let { data } = await verCode(param)
      if (data === null) {
        this.$message({
          message: 'The verification code has been sent, please check.',
          type: 'success'
        });
      }
    },
    /**
     * [changeFund description]
     * 修改资金密码
     * ------------------------
     * @Author   LLP
     * @DateTime 2019-12-25T16:14:40+0800
     * @return   {[type]}                 [description]
     */
    async changeFund() {
      let param = {
        ...this.fundForm
      }
      let { data } = await changeFundPassword(param)
      if ( data === null ) {
        this.$message({
          message: 'The mobile number has been modified successfully.',
          type: 'success'
        });
        this.$router.push({ path: '/account' })
      }
    },
    /**
     * [testAndVerify description]
     * 按钮是否可操作
     * -------------------------------
     * @Author   LLP
     * @DateTime 2019-12-25T16:07:09+0800
     * @return   {[type]}                 [description]
     */
    testAndVerify() {
      let from = this.fundForm
      if (from.current_fund_password !="" && from.fund_password !="" && (from.confirm_fund_password !="" && from.sms)) {
        this.confirmdb = false
        this.primary = 'primary'
      } else {
        this.confirmdb = true
        this.primary = 'info'
      }
    }
  }
};
</script>
<style lang="less" scoped>
.email-verification {
  height: 100vh;
  h2 {
    font-size: 26px;
    display: inline-block;
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 2px solid #edf0f4;
  }
  .el-form {
    padding: 45px 160px 0 0;
    .email-code {
      width: 430px;
      margin-right: 38px;
      display: inline-block;
    }
    .get-code {
      width: 105px;
    }
    .email-confirm {
      width: 100%;
    }
  }
}
</style>